<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>布置作业</title>
<link href="../../css/teachersty.css" th:href="@{/static/css/teachersty.css}" rel="stylesheet">
<!-- 引入bootstrap样式 -->
<link href="../../css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
<!-- jquery -->
<script src="../../js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
<script src="../../js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}"></script>
<!-- bootstrap-table.min.js -->
<script src="../../js/bootstrap-table.min.js" th:src="@{/static/js/bootstrap-table.min.js}"></script>
<!-- 引入中文语言包 -->
<script src="../../js/bootstrap-table-zh-CN.min.js" th:src="@{/static/js/bootstrap-table-zh-CN.min.js}"></script>

<style type="text/css">
.colStyle{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
</style>

</head>
<body>
	<div style="padding-top: 8px;padding-right: 15px;float: right;">
		<button class="btn btn-info btn-sm" id="addwork" data-toggle="modal" data-target="#myModal">新增作业</button>
	</div>
	<!-- 布置作业模态框 -->
	<div class="modal fade" id="myModal"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false">
	<div class="modal-dialog">
	        <div class="modal-content">
	          <div class="modal-header">
	            <h4 class="modal-title">布置作业</h4>
	          </div>
	          <div class="modal-body">
	            <div class="panel panel-success" style="width: 100%;">
				  <div class="panel-heading" contenteditable="true" style="overflow:auto;" id="subTitle">作业标题</div>
				  <div class="panel-body" contenteditable="true" style="height: 100px;overflow:auto;" id="subContent">
				    作业内容
				  </div>
				</div>
	          </div><!-- modal-body结束 -->
	          <div class="modal-footer">
	            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
	            <button class="btn btn-primary" type="button" id="subWorkBtn">提交</button>
	          </div>
	        </div><!-- /.modal-content -->
	      </div><!-- /.modal-dialog -->
	</div><!-- 布置作业模态框结束 -->
	
	<!-- 查看作业详情 -->
	<div class="modal fade" id="workdetail"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog">
	        <div class="modal-content">
	          <div class="modal-header">
	            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	            <h4 class="modal-title">作业详情</h4>
	          </div>
	          <div class="modal-body">
	            <div class="panel panel-success" style="width: 100%;">
				  <div class="panel-heading" contenteditable="true" style="overflow:auto;"><span id="wtitle"></span></div>
				  <div class="panel-body" contenteditable="true" style="height: 100px;overflow:auto;">
				    <p id="wcontent"></p>
				  </div>
				</div>
	          </div><!-- modal-body结束 -->
	        </div><!-- /.modal-content -->
	      </div><!-- /.modal-dialog -->
	</div><!-- 布置作业模态框结束 -->
	
	
	<div class="cmtitle">作业布置记录</div>
	<div class="cmline"></div>
	<!-- 作业记录 -->
	<div class="card">
		<table id="table" style="table-layout: fixed;">
		</table>
		<script>
			$("#table").bootstrapTable('destroy');
			$("#table").bootstrapTable({ // 对应table标签的id
				url : "searchTeacherWorks", // 获取表格数据的url
				cache : false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
				striped : true, //表格显示条纹，默认为false
				pagination : true, // 在表格底部显示分页组件，默认false
				pageList : [ 1, 2 ], // 设置页面可以显示的数据条数
				pageSize : 1, // 页面数据条数
				pageNumber : 1, // 首页页码
				sidePagination : 'server', // 设置为服务器端分页
				queryParams : function(params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
		
					return {
						pageSize : params.limit, // 每页要显示的数据条数
						offset : params.offset, // 每页显示数据的开始行号
						sort : params.sort, // 要排序的字段
						sortOrder : params.order, // 排序规则
						tid: $("#uid",parent.document).val(),
						cid: $("#courseid",parent.document).text(),
					}
				},
				sortName : 'cid', // 要排序的字段
				sortOrder : 'desc', // 排序规则
				columns : [
					{
						field : 'cid', // 返回json数据中的name
						title : '课程号', // 表格表头显示文字
						align : 'center', // 左右居中
						valign : 'middle' // 上下居中
					}, {
						field : 'cname',
						title : '课程名称',
						align : 'center',
						valign : 'middle'
					}, {
						field : 'workName',
						title : '作业标题',
						align : 'center',
						valign : 'middle'
					},{
						field : 'content',
						title : '作业内容',
						align : 'center',
						valign : 'middle',
						class:'colStyle',
					}, {
						title : "操作",
						align : 'center',
						valign : 'middle',
						width : 160, // 定义列的宽度，单位为像素px
						formatter : function(value, row, index) {
							return '<a href="javascript:void(0)"  class="msub">查看详情</a>';
						},
					    events: operateEvents = {"click .msub":function(e,value,row,index){
						        $("#workdetail").modal("show");
						        $("#wtitle").html(row.workName);    
						        $("#wcontent").html(row.content);    		
					    	}
					    },      
						
					}
		
				],
				onLoadSuccess : function() { //加载成功时执行
					console.info("加载成功");
				},
				onLoadError : function() { //加载失败时执行
					console.info("加载数据失败");
				}
			})
		</script>
	
	</div>
	
	<script type="text/javascript">
		$(function(){
			$("#subWorkBtn").click(function(){
				var subTitle = $("#subTitle").text();
				var subContent = $("#subContent").text();
				$.ajax({
					url : "subWork", // 请求目标
					type : "GET", // 请求类型 POST(加密) 或者 GET(默认)
					data : {tid: $("#uid",parent.document).val(),
						cid: $("#courseid",parent.document).text(),
						subTitle:subTitle,subContent:subContent},
					dataType : 'text',
					async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
					cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
					success : function(data) {
						if(data == "作业已发布"){
							alert(data);
							//关闭新增作业模态框
							$("#subTitle").text("作业标题");
							$("#subContent").text("作业内容");
							$("#myModal").modal("hide");
						}else{
							alert(data);
						}		
					}
				});
				
			});
		});
	</script>

</body>
</html>